<template>
  <div class="app-container">
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="taskList"
      fit
      border
      highlight-current-row
      style="width: 100%;"
    >

      <!-- 行展开，显示的详细信息 -->
      <el-table-column type="expand">
        <template slot-scope="{row}">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item
              v-for="item in row.formDataArr"
              :label="item.name"
              label-width="200px">
              <span >{{ item.value }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
        label="任务ID"
        prop="taskId"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.taskId }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="任务名称"
        prop="taskName"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.taskName }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="procInstId"
        prop="procInstId"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.procInstId }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="流程发起时间"
        prop="procInstStartTime"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.procInstStartTime }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="流程状态"
        prop="processStatus"
        align="center"
        min-width="150"
        :fixed="false">
        <template slot-scope="{row}">
          <span>{{ row.processStatus }}</span>
        </template>
      </el-table-column>

      <!--操作Button + 页面级权限控制:hasPermission -->
      <el-table-column fixed="right" label="操作" align="center" min-width="130">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleProcImage(row)">流程图</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog title="流程图" :visible.sync="dialog4ProcImage" width="60%">
      <TmptFlowImage ref="tmptFlowImage" :procInstId="procInstId" />
    </el-dialog>

  </div>
</template>

<script>
import {listMyCompleteTask} from './api/tmpt'
import TmptFlowImage from './tmpt-flow-image'

export default {
    name: 'TmptMyCompleteTask',
    components: {TmptFlowImage},
    data() {
        return {
            tableKey:'',
            taskList:[],
            listLoading:false,
            dialog4ProcImage: false,
            procInstId: undefined
        }
    },
    computed: {
    },
    mounted() {
        this.list();
    },
    methods: {
        list() {
            this.listLoading = true
            listMyCompleteTask().then(r => {
                this.listLoading = false
                if (!r.success) {
                    this.notify(r)
                    return
                }
                this.taskList = r.list
                console.log(this.taskList)
            })
        },
        handleProcImage(row) {
            this.dialog4ProcImage = true
            this.procInstId = row.procInstId
        }
    }
}
</script>
